<template>
  <div class="dashboard-container">
    <div class="welcome-section">
      <h1 class="welcome-title">欢迎使用 AI 创作平台</h1>
      <p class="welcome-subtitle">模型经过微调 更适合电商行业</p>
    </div>

    <div class="cards-grid">
      <!-- 数字人 -->
      <div class="feature-card digital-human-card" @click="handleCardClick('/digital-human/generate')">
        <div class="card-content">
          <h3 class="card-title">数字人</h3>
          <p class="card-desc">通过照片或者视频，生成新的数字人</p>
          <div class="card-video-preview" @click.stop>
            <video 
              ref="exampleVideoRef"
              class="example-video"
              :src="exampleVideoUrl"
              loop
              preload="metadata"
              @mouseenter="playExampleVideo"
              @mouseleave="pauseExampleVideo"
            >
              您的浏览器不支持视频播放。
            </video>
            <div class="video-overlay">
              <div class="video-label">🎭 数字人效果示例</div>
            </div>
          </div>
          <div class="card-actions">
            <span class="action-link">数字人生成</span>
            <el-icon class="arrow-icon"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>

      <!-- 营销数字人 -->
      <div class="feature-card marketing-video-card" @click="handleCardClick('/marketing-video/generate')">
        <div class="card-content">
          <h3 class="card-title">营销数字人</h3>
          <p class="card-desc">通过人物照片和产品图片，生成讲解视频</p>
          <div class="card-video-preview" @click.stop>
            <video 
              ref="marketingVideoRef"
              class="example-video"
              :src="marketingVideoUrl"
              loop
              preload="metadata"
              @mouseenter="playMarketingVideo"
              @mouseleave="pauseMarketingVideo"
            >
              您的浏览器不支持视频播放。
            </video>
            <div class="video-overlay">
              <div class="video-label">🎯 营销视频效果示例</div>
            </div>
          </div>
          <div class="card-actions">
            <span class="action-link">营销数字人生成</span>
            <el-icon class="arrow-icon"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>

      <!-- 视频混剪 -->
      <div class="feature-card video-mix-card" @click="handleCardClick('/video-mix/generate')">
        <div class="card-content">
          <h3 class="card-title">视频混剪</h3>
          <p class="card-desc">通过产品素材和人物照片，智能生成讲解视频</p>

          <div class="card-video-preview" @click.stop>
            <video 
              ref="videoMixRef"
              class="example-video"
              :src="videoMixUrl"
              loop
              preload="metadata"
              @mouseenter="playVideoMix"
              @mouseleave="pauseVideoMix"
            >
              您的浏览器不支持视频播放。
            </video>
            <div class="video-overlay">
              <div class="video-label">🎬 混剪视频效果示例</div>
            </div>
          </div>
          <div class="card-actions">
            <span class="action-link">生成混剪视频</span>
            <el-icon class="arrow-icon"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>

      <!-- 声音克隆 -->
      <div class="feature-card voice-clone-card" @click="handleCardClick('/voice/tts')">
        <div class="card-content">
          <h3 class="card-title">声音克隆</h3>
          <p class="card-desc">克隆和生成语音内容</p>
          <div class="card-voice-preview" @click.stop>
            <div class="voice-icon-wrapper">
              <el-icon class="voice-icon"><Microphone /></el-icon>
            </div>
            <div class="voice-info">
              <div class="voice-label">🎤 音色克隆与语音生成</div>
              <div class="voice-hint">上传音频克隆音色，文字转语音</div>
            </div>
          </div>
          <div class="card-actions">
            <span class="action-link">新建音色</span>
            <el-icon class="arrow-icon"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>

      <!-- 文生图 -->
      <div class="feature-card image-generate-card" @click="handleCardClick('/image-generate')">
        <div class="card-content">
          <h3 class="card-title">文生图</h3>
          <p class="card-desc">通过文字生成图片或者编辑图片，比如把A图的产品换到B图上</p>
          <div class="card-image-preview" @click.stop>
            <img 
              :src="imageGenerateExampleUrl" 
              alt="文生图示例" 
              class="example-image"
            />
            <div class="image-overlay">
              <div class="image-label">🎨 AI 图像生成效果示例</div>
            </div>
          </div>
          <div class="card-actions">
            <span class="action-link">开始生成</span>
            <el-icon class="arrow-icon"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>

      <!-- 万物迁移 -->
      <div class="feature-card transfer-all-card" @click="handleCardClick('/transfer-all/video-generate')">
        <div class="card-content">
          <h3 class="card-title">万物迁移</h3>
          <p class="card-desc">把A图的产品换到B图上，并生成视频</p>
          <div class="card-transfer-preview" @click.stop>
            <div class="transfer-images">
              <div class="transfer-image-item">
                <img src="https://share-1259268558.cos.ap-shanghai.myqcloud.com/wechat_2025-08-24_234703_003.png" alt="A图" />
                <span class="image-label">A图</span>
              </div>
              <div class="transfer-arrow">→</div>
              <div class="transfer-image-item">
                <img src="https://jianji-api.oss-cn-shanghai.aliyuncs.com/wechat_2025-08-25_002533_369.png" alt="B图" />
                <span class="image-label">B图</span>
              </div>
            </div>
            <div class="transfer-video-wrapper">
              <video 
                ref="transferVideoRef"
                class="transfer-example-video"
                :src="transferVideoUrl"
                preload="metadata"
                @mouseenter="playTransferVideo"
                @mouseleave="pauseTransferVideo"
              >
                您的浏览器不支持视频播放。
              </video>
            </div>
          </div>
          <div class="card-actions">
            <span class="action-link">万物迁移视频生成</span>
            <el-icon class="arrow-icon"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>

      <!-- 充值中心 -->
      <div class="feature-card recharge-card" @click="handleCardClick('/recharge/index')">
        <div class="card-content">
          <h3 class="card-title">充值中心</h3>
          <p class="card-desc">账户充值和消费记录</p>
          <div class="card-recharge-preview" @click.stop>
            <div class="recharge-icon-wrapper">
              <el-icon class="recharge-icon"><Wallet /></el-icon>
            </div>
            <div class="recharge-info">
              <div class="recharge-label">💰 账户余额管理</div>
              <div class="recharge-hint">查看余额、充值、消费记录</div>
            </div>
          </div>
          <div class="card-actions">
            <span class="action-link">立即充值</span>
            <el-icon class="arrow-icon"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 
  User, 
  VideoCamera, 
  Microphone, 
  Document, 
  Wallet, 
  ArrowRight,
  VideoPlay,
  VideoPause
} from '@element-plus/icons-vue'

const router = useRouter()

// 数字人示例视频
const exampleVideoUrl = ref('https://share-1259268558.cos.ap-shanghai.myqcloud.com/videoAvatar/23d9f37b8a3148e489a1c049834ab014/output.mp4')
const exampleVideoRef = ref(null)

// 营销视频示例
const marketingVideoUrl = ref('https://share-1259268558.cos.ap-shanghai.myqcloud.com/marketing_videos/finished/20250824/68aaba0f60b51.mp4')
const marketingVideoRef = ref(null)

// 视频混剪示例
const videoMixUrl = ref('https://share-1259268558.cos.ap-shanghai.myqcloud.com/m2v/388d7086747748d79586ee8e4980570a/output.mp4')
const videoMixRef = ref(null)

// 声音克隆示例
const voiceCloneAudioUrl = ref('https://share-1259268558.cos.ap-shanghai.myqcloud.com/voice/text2voice/20250904/68b960837c93c.mp3')
const voiceCloneAudioRef = ref(null)
const isVoiceCloneAudioPlaying = ref(false)

// 万物迁移示例
const transferVideoUrl = ref('https://share-1259268558.cos.ap-shanghai.myqcloud.com/product_anyshoot/videos/20250914/68c6e3bb0bddb.mp4')
const transferVideoRef = ref(null)

// 文生图示例
const imageGenerateExampleUrl = ref('https://bdw-1259268558.cos.ap-shanghai.myqcloud.com/generated-image-1763909292613.jpg')

const handleCardClick = (path) => {
  // 检查是否已登录
  const isAuthenticated = localStorage.getItem('token')
  
  if (!isAuthenticated) {
    // 未登录，跳转到登录页
    router.push('/login')
  } else {
    // 已登录，跳转到目标页面
    router.push(path)
  }
}

// 播放示例视频
const playExampleVideo = () => {
  if (exampleVideoRef.value) {
    exampleVideoRef.value.play().catch(() => {
      // 忽略自动播放失败
    })
  }
}

// 暂停示例视频
const pauseExampleVideo = () => {
  if (exampleVideoRef.value) {
    exampleVideoRef.value.pause()
    exampleVideoRef.value.currentTime = 0
  }
}

// 播放营销视频
const playMarketingVideo = () => {
  if (marketingVideoRef.value) {
    marketingVideoRef.value.play().catch(() => {
      // 忽略自动播放失败
    })
  }
}

// 暂停营销视频
const pauseMarketingVideo = () => {
  if (marketingVideoRef.value) {
    marketingVideoRef.value.pause()
    marketingVideoRef.value.currentTime = 0
  }
}

// 播放视频混剪
const playVideoMix = () => {
  if (videoMixRef.value) {
    videoMixRef.value.play().catch(() => {
      // 忽略自动播放失败
    })
  }
}

// 暂停视频混剪
const pauseVideoMix = () => {
  if (videoMixRef.value) {
    videoMixRef.value.pause()
    videoMixRef.value.currentTime = 0
  }
}

// 播放声音克隆音频
const playVoiceCloneAudio = () => {
  if (voiceCloneAudioRef.value) {
    voiceCloneAudioRef.value.play().catch(() => {
      // 忽略自动播放失败
    })
  }
}

// 暂停声音克隆音频
const pauseVoiceCloneAudio = () => {
  if (voiceCloneAudioRef.value) {
    voiceCloneAudioRef.value.pause()
  }
}

// 音频播放事件
const onVoiceCloneAudioPlay = () => {
  isVoiceCloneAudioPlaying.value = true
}

// 音频暂停事件
const onVoiceCloneAudioPause = () => {
  isVoiceCloneAudioPlaying.value = false
}

// 音频结束事件
const onVoiceCloneAudioEnded = () => {
  isVoiceCloneAudioPlaying.value = false
}

// 播放万物迁移视频
const playTransferVideo = () => {
  if (transferVideoRef.value) {
    transferVideoRef.value.play().catch(() => {
      // 忽略自动播放失败
    })
  }
}

// 暂停万物迁移视频
const pauseTransferVideo = () => {
  if (transferVideoRef.value) {
    transferVideoRef.value.pause()
    transferVideoRef.value.currentTime = 0
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 24px;
  max-width: 1800px;
  margin: 0 auto;
  background: transparent;
}

.welcome-section {
  text-align: center;
  margin-bottom: 32px;
}

.welcome-title {
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px 0;
  letter-spacing: 0.5px;
}

.welcome-subtitle {
  font-size: 16px;
  color: #a0aec0;
  margin: 0;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.feature-card {
  background: #1a1a1f;
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #409eff, #66b1ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(64, 158, 255, 0.3);
  background: #1f1f25;
}

.feature-card:hover::before {
  transform: scaleX(1);
}


.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px 0;
}

.card-desc {
  font-size: 13px;
  color: #a0aec0;
  margin: 0 0 16px 0;
  line-height: 1.5;
  flex: 1;
}

.digital-human-card,
.marketing-video-card,
.video-mix-card,
.voice-clone-card,
.image-generate-card,
.transfer-all-card,
.recharge-card {
  position: relative;
  overflow: hidden;
}

.card-video-preview {
  width: 100%;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1f 0%, #0f0f12 50%, #1a1a1f 100%);
  position: relative;
  margin: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.example-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

.video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: 16px 20px 12px;
  pointer-events: none;
}

.video-label {
  font-size: 12px;
  color: #fff;
  text-align: center;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.card-audio-preview {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1f 0%, #0f0f12 50%, #1a1a1f 100%);
  position: relative;
  margin: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.audio-player-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.example-audio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.audio-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 20px;
}

.audio-play-btn,
.audio-pause-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  flex-shrink: 0;
}

.audio-play-btn:hover,
.audio-pause-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
}

.audio-pause-btn {
  background: linear-gradient(135deg, #67c23a, #85ce61);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

.audio-pause-btn:hover {
  box-shadow: 0 6px 16px rgba(103, 194, 58, 0.4);
}

.audio-info-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-label {
  font-size: 13px;
  color: #a0aec0;
  font-weight: 500;
}

.card-image-preview {
  width: 100%;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1f 0%, #0f0f12 50%, #1a1a1f 100%);
  position: relative;
  margin: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.example-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: 16px 20px 12px;
  pointer-events: none;
}

.image-preview-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 200px;
  margin-bottom: 12px;
}

.image-item {
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.2), rgba(102, 177, 255, 0.1));
  border: 1px solid rgba(64, 158, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.image-item:hover {
  transform: scale(1.05);
  border-color: rgba(64, 158, 255, 0.5);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.image-placeholder {
  font-size: 32px;
  opacity: 0.8;
}

.image-label {
  font-size: 12px;
  color: #a0aec0;
  font-weight: 500;
  text-align: center;
}

.card-transfer-preview {
  width: 100%;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.transfer-images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
  background: linear-gradient(135deg, #1a1a1f 0%, #0f0f12 50%, #1a1a1f 100%);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.transfer-image-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.transfer-image-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0f0f12;
}

.image-label {
  font-size: 11px;
  color: #909399;
}

.transfer-arrow {
  color: #409eff;
  font-size: 20px;
  font-weight: bold;
}

.transfer-video-wrapper {
  width: 100%;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1f 0%, #0f0f12 50%, #1a1a1f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.transfer-example-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.card-recharge-preview {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1f 0%, #0f0f12 50%, #1a1a1f 100%);
  position: relative;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  gap: 20px;
  padding: 24px;
}

.recharge-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.recharge-card:hover .recharge-icon-wrapper {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(64, 158, 255, 0.4);
}

.recharge-icon {
  font-size: 40px;
  color: #fff;
}

.recharge-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.recharge-label {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

.recharge-hint {
  font-size: 12px;
  color: #a0aec0;
}

.card-voice-preview {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1f 0%, #0f0f12 50%, #1a1a1f 100%);
  position: relative;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  gap: 20px;
  padding: 24px;
}

.voice-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #67c23a, #85ce61);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(103, 194, 58, 0.3);
  transition: all 0.3s ease;
}

.voice-clone-card:hover .voice-icon-wrapper {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(103, 194, 58, 0.4);
}

.voice-icon {
  font-size: 40px;
  color: #fff;
}

.voice-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.voice-label {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

.voice-hint {
  font-size: 12px;
  color: #a0aec0;
}

.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
}

.action-link {
  font-size: 14px;
  color: #409eff;
  font-weight: 500;
  transition: color 0.3s ease;
}

.feature-card:hover .action-link {
  color: #66b1ff;
}

.arrow-icon {
  font-size: 16px;
  color: #409eff;
  transition: all 0.3s ease;
}

.feature-card:hover .arrow-icon {
  transform: translateX(4px);
  color: #66b1ff;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1000px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 24px;
  }
  
  .welcome-title {
    font-size: 24px;
  }
  
  .welcome-subtitle {
    font-size: 14px;
  }
  
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .feature-card {
    padding: 24px;
  }
  
  .card-icon-wrapper {
    width: 56px;
    height: 56px;
  }
  
  .card-icon {
    font-size: 28px;
  }
}
</style>
